<script setup>
const props = defineProps({ type: String, msg: String })

const myMessage = ref()
const visible = ref(false)

const show = () => {
  visible.value = true
}
const close = () => {

  setTimeout(() => {
    myMessage.value.setAttribute('class', 'msg-postiton out')
    setTimeout(() => {
      visible.value = false
    }, 500)
  }, 300)
}
defineExpose({
  show,
  close
})
</script>

<template>
  <div ref="myMessage" class="msg-postiton" :class="{in:visible}" v-show="visible">
    <t-message :theme="props.type">{{props?.msg}}</t-message>
  </div>
</template>

<style scoped>
.msg-postiton {
  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translate(-50%, -50%);
}

.in {
  animation: in cubic-bezier(.22, 1.05, 0, 1) 0.8s;
  top: 55px;
}

@keyframes in {
  0% {
    top: 0;
  }

  100% {
    top: 55px;
  }
}

.out {
  animation: out cubic-bezier(0, .63, 0, .94) 0.8s;
  top: -50px;
}

@keyframes out {
  0% {
    top: 55px;
  }

  100% {
    top: -50px;
  }
}
</style>